<template>
    <div>
        <h2 style="font-size: 20px;padding: 10px 0;">vue-toast-notification：<a href="https://github.com/ankurk91/vue-toast-notification#thistoasterrormessageoptions">https://github.com/ankurk91/vue-toast-notification#thistoasterrormessageoptions</a></h2>
        <van-button @click="open('error')">
            toast
        </van-button>
        <van-button @click="open('success')">
            success
        </van-button>
        <van-button @click="open('info')">
            info
        </van-button>
        <van-button @click="open('warning')">
            warning
        </van-button>
    </div>
</template>

<script setup lang="ts">
import { onMounted, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance()
const open = (funText:string)=>{
    proxy.$toast[funText]("jsdkvndfk",{
        duration:1000, //时间
        position:"top", //位置
        dismissible:true, //点击消失
        onclick:function(){
            console.log("点击输出或是可以做点什么")
        },
        onDismiss:function(){
            console.log("消失后的回调")
        },
        queue:true,//在显示新的之前新要旧的消失
        pauseOnHover:true //当鼠标停留在toast上暂停倒计时
    })
}
onMounted(() => { })
</script>

<style lang='scss' scoped></style>